/**
 * 显示用户列表的UI组件
 */
import React, { Component } from 'react'
import PropTypes from 'prop-types'

import { WingBlank, WhiteSpace, Card } from 'antd-mobile'
import { withRouter } from 'react-router-dom'
import QueueAnim from 'rc-queue-anim'

const Header = Card.Header
const Body = Card.Body

class userList extends Component {

  static propTypes = {
    userList: PropTypes.array.isRequired
  }

  render() {
    const { userList } = this.props
    return (
      <WingBlank style={{ marginBottom: '55px', marginTop: '43px' }}>
        <QueueAnim type='scale'>
        {userList.map(e => (
          <div key={e.username}>
            <WhiteSpace />
            <Card onClick={() => this.props.history.push(`/chat/${e._id}`)}>
              <Header
                thumb={e.header ? require(`../../assets/headers/${e.header}.png`) : null}
                extra={e.username}
              />
              <Body>
                <div>职位: {e.post}</div>
                <div>公司: {e.company}</div>
                <div>月薪: {e.salary}</div>
                <div>描述: {e.info}</div>
              </Body>
            </Card>
          </div>
        )
        )}
        </QueueAnim>
        

      </WingBlank>
    )
  }
}
export default withRouter(userList)
